<!--
 * @Author: Shber
 * @Date: 2024-07-01 15:49:30
 * @LastEditors: Shber
 * @LastEditTime: 2024-07-12 17:23:29
 * @Description: 
-->
<template>

<view class="content">
  <view class="white_card address_group mb_10">
    <view class="mr_30">
      <text class="address_name">爱上龙虾北京顺义大仓</text>
      <text class="address_desc">北京市北京市顺义区空港街道千里马国际大厦千里马国际605</text>
    </view>
    <uni-icons type="right" size="16" color="#333333"></uni-icons>
  </view>
  <uni-forms ref="baseForm" :label-width="100" :modelValue="form">
    <view class="tab_list">
      <view 
        :class="{'tab_item':true, 'tab_active': tabActive === item.type}" 
        v-for="item in tabInfo" 
        :key="item.type"
        @click="switchTab(item)">{{item.label}}</view>
      </view>
    <view class="white_card">

      <view class="form_title">
        <text>收货信息</text>
        <text class="blue_txt">智能粘贴</text>
      </view>
      <uni-forms-item label="收货人" required>
        <uni-easyinput :inputBorder="false" v-model="form.name" placeholder="请输入收货人真实姓名" />
      </uni-forms-item>
      <uni-forms-item label="手机号" required>
        <uni-easyinput :inputBorder="false" v-model="form.name" placeholder="请输入电话号码" />
      </uni-forms-item>
      <uni-forms-item label="地址">
        <view class="flex_label">
          <text class="uni-input-input">省/市/区</text>
          <uni-icons type="right" size="16" color="#333333"></uni-icons>
        </view>
      </uni-forms-item>
      <uni-forms-item label="详细地址" required>
        <uni-easyinput :inputBorder="false" v-model="form.age" placeholder="详细地址（例如**街**号**）" />
      </uni-forms-item>
      <uni-forms-item label="期望送达" required>
        <view class="flex_label" @click="popupShow = true">
          <text class="uni-input-input">立即送达</text>
          <uni-icons type="right" size="16" color="#333333"></uni-icons>
        </view>
      </uni-forms-item> 
      <view class="form_label mb_10"><text>备注</text><text>(选填)</text></view>
      <uni-easyinput type="textarea" v-model="form.value" placeholder="请输入内容"></uni-easyinput> 
    </view>

    <view class="white_card mt_10">
      <view class="form_title">
        <text>商品信息</text>
        <text style="font-size: 14px;">1件商品</text>
      </view>

      <OrderGoodsItem/>
      <view class="select_goods mt_10"  @click="goPath('/pages/optGoods/index')">
        <uni-icons type="plusempty" size="18" color="#999"></uni-icons>
        <text class="ml_5">选择商品</text>
      </view>
    </view>
  </uni-forms>

  <my-popup v-model="popupShow" title="预约时间" :is-mask-click="false">
    <view class="opt_group">
      <view class="opt_day">
        <view @click="optDay(item)" :class="{'day_item':true, 'opt_day_item': item.id == optDayId}" v-for="item in dayInfo" :key="item.id"><text>{{item.label}}</text></view>
      </view>
      <view class="opt_time">
        <view @click="optTime(item)" :class="{'time_item':true, 'opt_time_item': item.id == optTimeId}" v-for="item in timeInfo" :key="item.id"><text>{{item.label}}</text></view>
      </view>
    </view>
  </my-popup>
</view>


<!-- <m-tabbar :active="4"/> -->

</template>
<script setup>
  import { ref, reactive } from 'vue'
  import OrderGoodsItem from '../order/components/OrderGoodsItem.vue'
  // import selectTime from './components/SelectTime.vue'
  import myPopup from '@/components/MyPopup/index.vue'

  const popupShow = ref(false)
  const tabActive = ref(1)
  const form = ref({

  })
  const dayInfo = ref([
    {label:'今天（周五）', id:1},
    {label:'11-18（周六）', id:2},
    {label:'11-19（周日）', id:3},
    {label:'11-20（周一）', id:4},
    {label:'11-21（周二）', id:5},
    {label:'11-22（周三）', id:6}
  ])
  const timeInfo = ref([
    {label:'立即送达', id:1},
    {label:'14:00', id:2},
    {label:'14:30', id:3},
    {label:'15:00', id:4},
    {label:'15:30', id:5},
    {label:'16:00', id:6},
    {label:'16:30', id:7},
    {label:'14:00', id:22},
    {label:'14:30', id:33},
    {label:'15:00', id:44},
    {label:'15:30', id:55},
    {label:'16:00', id:66},
    {label:'16:30', id:76}
  ])

  const tabInfo = ref([
    {label:'同城配送', type:1 },
    {label:'寄快递', type:2 }
  ])

  const switchTab = (item)=>{ tabActive.value = item.type }

  const optDayId = ref(1)
  const optDay = (item)=>{
    optDayId.value = item.id
  }

  const optTimeId = ref(1)
  const optTime = (item)=>{
    optTimeId.value = item.id
  }
  const goPath = (_url)=>{
    uni.navigateTo({url:_url})
  }
</script>
<style lang="scss" scoped>
.content{padding: 10px;}
.flex_label{display: flex; align-items: center; justify-content: space-between; height: 36px; line-height: 36px;}
.form_title{display: flex; justify-content: space-between; font-size: 16px; color: #333; margin-bottom: 8px;
  .sku_num{font-size: 12px; color: #666666;}
}
.must{ &::before{ content: '*'; color: red; } }
.sku_item{border-bottom: 1px solid #F5F5F5; }
.mt_20{margin-top: 20px !important;}
.select_goods{display: flex; justify-content: center; align-items: center; font-size: 14px; color: #333; height: 80px; border: 1px dashed #efefef;}
.address_group{display: flex; align-items: center; justify-content: space-between;}
.address_name{display: block; font-size: 16px; color: #333333; margin-bottom: 5px;}
.address_desc{font-size: 12px; color: #666666; }
.tab_list{display: flex; align-items: center; background-color: #f8f8f9; border-radius: 4px 4px 0 0; overflow: hidden;
  .tab_item{flex: 1; text-align: center; height: 50px; line-height: 50px;}
  .tab_active{background-color: #fff;}
}
.form_label{ font-size: 14px; color: #606266; }
.blue_txt{color: #2DAED6; font-size: 14px;}
.opt_group{display: flex; width: 100%; background-color: #fff;}
.day_item, .time_item{padding: 15px 10px; border-bottom: 1px solid #f8f8f9;}
.opt_day{flex: 1; background-color: #f8f8f9;}
.opt_time{flex: 2; overflow-y: scroll; height: 60vh; padding-right: 16px;}
.opt_day_item{background-color: #fff;}
.opt_time_item{background: url('../../static/img/right.png') no-repeat right center;
  background-size: 20px 20px;
}
</style>